---
title: Préchargement
description: Préchargez les liens pour une navigation plus rapide entre les pages.
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components'
import Since from '~/components/Since.astro'

Les temps de chargement des pages jouent un rôle important dans la convivialité et l'appréciation générale d'un site. La fonctionnalité de **préchargement consenti** d'Astro apporte les avantages d'une navigation quasi instantanée à votre application multi-pages (MPA) au fur et à mesure que vos visiteurs interagissent avec le site.

## Activer le préchargement

Vous pouvez activer le préchargement avec l'option de configuration `prefetch` :

```js title="astro.config.mjs" ins={4}
import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true
});
```

Un script de préchargement sera ajouté à toutes les pages de votre site. Vous pouvez ensuite ajouter l'attribut `data-astro-prefetch` à n'importe quel lien `<a />` de votre site afin d'opter pour le préchargement. Lorsque vous survolez le lien, le script va récupérer la page en arrière-plan.

```html
<a href="/about" data-astro-prefetch>
```

Notez que le préchargement ne fonctionne que pour les liens à l'intérieur de votre site, et non pour les liens externes.

## Configuration du préchargement

L'option de configuration `prefetch` accepte également un objet pour personnaliser davantage le préchargement.

### Stratégies de préchargement

Astro prend en charge 4 stratégies de préchargement pour différents cas d'utilisation :

- `hover` (par défaut) : Préchargement lorsque le lien est survolé ou reçoit le focus.
- `tap` : Préchargement juste avant que vous ne cliquiez sur le lien.
- `viewport` : Préchargement lorsque les liens entrent dans la zone d'affichage.
- `load` : Préchargement de tous les liens de la page après le chargement de celle-ci.

Vous pouvez spécifier une stratégie pour un lien individuel en le passant à l'attribut `data-astro-prefetch` :

```html
<a href="/about" data-astro-prefetch="tap">About</a>
```

Chaque stratégie est finement ajustée pour ne précharger que lorsque c'est nécessaire et économiser la bande passante de vos utilisateurs. Par exemple :

- Si un visiteur utilise le [mode d'économie de données](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/saveData) ou dispose d'une [connexion lente](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/effectiveType), la stratégie de préchargement sera remplacée par la stratégie `tap`.
- Un survol ou un défilement rapide des liens ne les préchargera pas.

### Stratégie de préchargement par défaut

La stratégie de préchargement par défaut lors de l'ajout de l'attribut `data-astro-prefetch` est `hover`. Pour la changer, vous pouvez configurer [`prefetch.defaultStrategy`](/fr/reference/configuration-reference/#prefetchdefaultstrategy) dans votre fichier `astro.config.mjs` :

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    defaultStrategy: 'viewport'
  }
});
```

### Préchargement de tous les liens par défaut

Si vous voulez précharger tous les liens, y compris ceux qui n'ont pas l'attribut `data-astro-prefetch`, vous pouvez définir [`prefetch.prefetchAll`](/fr/reference/configuration-reference/#prefetchprefetchall) sur `true` :

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    prefetchAll: true
  }
});
```

Vous pouvez alors choisir de ne pas utiliser la fonction de préchargement pour les liens individuels en définissant `data-astro-prefetch="false"` :

```html
<a href="/about" data-astro-prefetch="false">A propos</a>
```

La stratégie de préchargement par défaut pour tous les liens peut être modifiée avec `prefetch.defaultStrategy` comme indiqué dans la section [stratégie de préchargement par défaut](#stratégie-de-préchargement-par-défaut).

## Préchargement programmatique

Comme certains éléments de navigation n'apparaissent pas toujours comme des liens `<a />` vous pouvez aussi précharger de manière programmatique avec l'API `prefetch()` du module `astro:prefetch` :

```astro
<button id="btn">Cliquez-moi</button>

<script>
  import { prefetch } from 'astro:prefetch';

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    prefetch('/about');
  });
</script>
```

L'API `prefetch()` inclut la même détection de [mode d'économie de données](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/saveData) et de [connexion lente](https://developer.mozilla.org/fr/docs/Web/API/NetworkInformation/effectiveType) de façon à ce qu'elle ne prenne en compte que ce qui est nécessaire.

Pour ignorer la détection de connexion lente, vous pouvez utiliser l'option `ignoreSlowConnection` :

```js
// Préchargement même en mode économiseur de données ou en cas de connexion lente
prefetch('/about', { ignoreSlowConnection: true });
```

### `eagerness`

<p>
**Type :** `'immediate' | 'eager' | 'moderate' | 'conservative'`<br />
**Par défaut :** `'immediate'`<br />
<Since v="5.6.0" />
</p>

Avec l'option expérimentale [`clientPrerender`](/fr/reference/experimental-flags/client-prerender/) activée, vous pouvez utiliser l'option `eagerness` dans `prefetch()` pour suggérer au navigateur avec quel empressement il doit précharger/pré-générer la cible des liens.

L'API est la même que celle décrite dans [l'API des règles de spéculation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/speculationrules#eagerness) et la valeur par défaut est `immediate` (l'option la plus rapide). Par ordre décroissant d’empressement, les autres options sont `eager`, `moderate`, et `conservative`.

L'option `eagerness` vous permet d'équilibrer les avantages de la réduction des temps d'attente avec les coûts de bande passante, de mémoire et de processeur pour les visiteurs de votre site. Certains navigateurs, comme Chrome, ont [mis en place des limites pour éviter les spéculations excessives](https://developer.chrome.com/blog/speculation-rules-improvements?hl=fr#chrome-limits)  (pré-rendu/préchargement d'un trop grand nombre de liens).

 ```astro
---
---
<script>
// Contrôle l'empressement du préchargement avec `experimental.clientPrerender`
import { prefetch } from 'astro:prefetch';

// Cette page nécessite beaucoup de ressources
prefetch('/tableau-de-bord-riche-en-donnees', { eagerness: 'conservative' });

// Cette page est essentielle au parcours du visiteur
prefetch('/mise-en-route'); // `{ eagerness: 'immediate' }` par défaut

// Cette page pourrait ne pas être consultée
prefetch('/conditions-utilisation', { eagerness: 'moderate' });
</script>
```

Pour utiliser `prefetch()` par programmation avec de grands ensembles de liens, vous pouvez définir `eagerness: 'moderate'` pour profiter des stratégies [Premier Entré, Premier Sorti (PEPS, ou FIFO en anglais)](https://fr.wikipedia.org/wiki/File_(structure_de_donn%C3%A9es)) et des heuristiques du navigateur pour permettre au navigateur de décider quand les pré-générer/précharger et dans quel ordre :

```astro "{eagerness: 'moderate'}"
<a class="link-moderate" href="/nice-link-1">Un lien sympa 1</a>
<a class="link-moderate" href="/nice-link-2">Un lien sympa 2</a>
<a class="link-moderate" href="/nice-link-3">Un lien sympa 3</a>
<a class="link-moderate" href="/nice-link-4">Un lien sympa 4</a>
...
<a class="link-moderate" href="/nice-link-20">Un lien sympa 20</a>

<script>
  import { prefetch } from 'astro:prefetch';

  const linkModerate = document.getElementsByClassName('link-moderate');
  linkModerate.forEach((link) => prefetch(link.getAttribute('href'), {eagerness: 'moderate'}));
  
</script>
```

Assurez-vous d'importer `prefetch()` uniquement dans les scripts côté client car il repose sur les API du navigateur.

## Utilisation avec les transitions de vue

Lorsque vous utilisez le composant [`<ClientRouter />` d’Astro](/fr/guides/view-transitions/#activation-des-transitions-de-vue-mode-spa) sur une page, le préchargement sera également activé par défaut. Il définit une configuration par défaut `{ prefetchAll: true }` qui active le [préchargement pour tous les liens](#préchargement-de-tous-les-liens-par-défaut) sur la page.

Vous pouvez personnaliser la configuration du préchargement dans `astro.config.mjs` pour remplacer la configuration par défaut. Par exemple :
  
```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

export default defineConfig({
  // Désactiver complètement le préchargement
  prefetch: false
})
```

```js title="astro.config.js"
import { defineConfig } from 'astro/config';

export default defineConfig({
  // Garder le préchargement, mais seulement pour les liens avec `data-astro-prefetch`.
  prefetch: {
    prefetchAll: false
  }
});
```

## Prise en charge du navigateur

Astro utilise [`<link rel="prefetch">`](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel/prefetch) si le navigateur le prend en charge, et revient à l'API [`fetch()`](https://developer.mozilla.org/fr/docs/Web/API/Fetch_API) dans le cas contraire.

Les navigateurs les plus courants prennent en charge le système de préchargement d'Astro avec des différences subtiles :

### Chrome

Chrome prend en charge `<link rel="prefetch">`. Le préchargement fonctionne comme prévu.

Il prend également entièrement en charge `<script type="speculationrules">` de l'[API des règles de spéculation](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API), qui permet de décrire plus en détail les [stratégies et règles de préchargement](#eagerness), améliorant ainsi l'expérience utilisateur de vos utilisateurs Chrome. Vous devrez activer la fonctionnalité expérimentale [`clientPrerender`](/fr/reference/experimental-flags/client-prerender/) pour l'utiliser avec `prefetch()`.

### Firefox

Firefox prend en charge `<link rel="prefetch">` mais peut afficher des erreurs ou échouer complètement :

- Sans un en-tête de cache explicite (par exemple [`Cache-Control`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Cache-Control) ou [`Expires`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Expires)), le préchargement se terminera par une erreur `NS_BINDING_ABORTED`.
- Même en cas d'erreur, si la réponse contient un en-tête [`ETag`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/ETag) correct, il sera réutilisé pour la navigation.
- Dans le cas contraire, s'il n'y a pas d'autres en-têtes de cache, le préchargement ne fonctionnera pas.

### Safari

Safari ne prend pas en charge `<link rel="prefetch">` et se rabattra sur l'API `fetch()` qui nécessite que les en-têtes de cache (par exemple [`Cache-Control`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Expires), et [`ETag`](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/ETag)) soient définis. Dans le cas contraire, le préchargement ne fonctionnera pas.

**Cas particulier :** Les en-têtes `ETag` ne fonctionnent pas dans les fenêtres privées.

### Recommandations

Pour une meilleure prise en charge de tous les navigateurs, assurez-vous que vos pages ont les bons en-têtes de cache.

Pour les pages statiques ou pré-rendues, l'en-tête `ETag` est souvent défini automatiquement par la plateforme de déploiement et est censé fonctionner dès le départ.

Pour les pages dynamiques et générées côté serveur, définissez vous-même les en-têtes de cache appropriés en fonction du contenu de la page. Consultez la [documentation de MDN sur la mise en cache HTTP](https://developer.mozilla.org/fr/docs/Web/HTTP/Caching) pour plus d'informations.

## Migration depuis `@astrojs/prefetch`

L'intégration `@astrojs/prefetch` a été dépréciée dans la version 3.5.0 et sera finalement entièrement supprimée. Utilisez les instructions suivantes pour migrer vers le préchargement intégré d'Astro qui remplace cette intégration.

<Steps>
1. Supprimez l'intégration `@astrojs/prefetch` et activez la configuration `prefetch` dans `astro.config.mjs` :

    ```js title="astro.config.mjs" ins={6} del={2,5}
    import { defineConfig } from 'astro/config';
    import prefetch from '@astrojs/prefetch';

    export default defineConfig({
      integrations: [prefetch()],
      prefetch: true
    });
    ```

2. Convertissez les options de configuration de `@astrojs/prefetch` :

    - L'intégration dépréciée utilisait l'option de configuration `selector` pour spécifier quels liens devraient être préchargés en entrant dans la zone d'affichage.
    
      Ajoutez `data-astro-prefetch="viewport"` à ces liens individuels à la place.

      ```html
      <a href="/about" data-astro-prefetch="viewport">
      ```

    - L'intégration dépréciée utilisait l'option de configuration `intentSelector` pour spécifier quels liens devaient être préchargés lorsqu'ils étaient survolés ou recevaient le focus.
    
      Ajoutez `data-astro-prefetch` ou `data-astro-prefetch="hover"` à ces liens individuels à la place :

      ```html
      <!-- Vous pouvez omettre la valeur si `defaultStrategy` est défini sur `hover` (par défaut). -->
      <a href="/about" data-astro-prefetch>

      <!-- Sinon, vous pouvez définir explicitement la stratégie de préchargement -->
      <a href="/about" data-astro-prefetch="hover">
      ```

    - L'option `throttles` de `@astrojs/prefetch` n'est plus nécessaire, car la nouvelle fonctionnalité de préchargement va automatiquement planifier et précharger de manière optimale.
</Steps>
